<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>替换节点</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
      $(function () {

        //1. 将 p 替换成 button
        //$("p").replaceWith("<input type='button' id='my' value='我的按钮'/>")

        //2.将p 替换成 超链接
        //$("p").replaceWith("<a href='http://www.baidu.com'>点击到百度</a><br/>");

        //3. 使用对象来进行替换
        var $button = $("<input type='button' id='my' value='我的按钮~'/>");
        $button.click(function (){
          alert("ok ~~~");
        })
        $("p").replaceWith($button);
      });
    </script>
  </head>
  <body>
  <h1>节点替换</h1>
  <p>Hello</p>
  <p>jquery</p>
  <p>World</p>
  </body>
</html>